#main {
  width: 100%;
}

#panel {
  width: 100%;
  height: 100%;
  background: #fff;
  margin: 0px;
  padding: 0px;
  float: left;
  clear: both;
}

label {
  font-size: x-large;
}

#input_panel {
  clear: both;
  width: 100%;  
  float: left;
  text-align: center;  
  margin: 5px;
}

#info_container {
  margin: 0px;
  padding: 0px;
  padding: 5px;
}

/* Indicates that item has no poisonous E */
/* Use colour chart: http://www.taoti.com/images/colorchart.gif */
#info_container.greenish {
  background: #99CC66;
}

/* Indicates that item has poisonous E */
#info_container.redish {
  background: #ff6666;
}

/* For edit window (neutral) */
#info_container.greyish {
  background: #e6ddd5;
}


/* Appears when item is being loaded */
.loader {
  color: #ccc;
  font-size: small;
}

.important {
  font-size: large;
  padding: 10px;
}

.invisible {
  display: none;
}

.visible {
  display: block;
}

.seen {
 visibility: visible;
}

/* Input options *

/* Input options */

#input_options {
  clear: both;
  float: left;
  text-align: center;
  margin: 5px;
  background: #efefef;
  width: 100%;
  padding: 5px;  
}

#input_options input {
  padding: 10px;
  margin: 5px;
}

#menu {
  width: 100%;
}

#menu {
  margin: 0px;
  padding: 0px;
  clear: both;
}

#menu_footer {
  margin: 0px;
  padding: 5px;
  clear: both;  
  background: #ccccee;
  text-align: right;
}

#menu_footer a{
  font-size: 11px;
  text-decoration: none;
}

#menu_footer a:hover{
  text-decoration: underline;
}

#menu .menu_active {
  /* background: #eeeeff; */ 
  float: left;
  padding: 5px;  
  margin: 0px;
  text-align: center;
  width: 80px;
  
  /* Gradient according to: http://gradients.glrzad.com */
  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.13, rgb(204,204,238)),
      color-stop(0.52, rgb(255,255,255)),
      color-stop(0.96, rgb(204,204,238))
  );
  background-image: -moz-linear-gradient(
      center bottom,
      rgb(204,204,238) 13%,
      rgb(255,255,255) 52%,
      rgb(204,204,238) 96%
   );

}

#menu .menu_inactive {
  background: #ffffff;
  float: left;
  padding: 5px;
  margin: 0px;
  text-align: center;  
  width:80px;
}

#menu a {
  text-decoration: none;
  color: #333333;
}

#menu a:hover {
  color: red;
}

div.icon_holder {
  height: 60px;
}


/* Add buttons */

input.add_textfield {  
  width: 50px;
  border: 1px solid #ccc;
  padding: 3px;
  margin-top: 2px;
  margin-left: 5px;
  margin-right: 5px;
}

input.add_button {
}

.add_container {
  background: #eeeeff;  
  padding: 3px;
}

/* Add form which is initially empty */
.add_form {
  margin-top: 10px; 
  display: none
}

.item_container {
 
}

.edit_container {
  margin: 0px;
  padding: 0px;
  float: left;
}

/* additives */


#additives {
  clear: both;
}

#additives a {
  text-decoration: none;
}

#additives_title {
  clear: both;
  margin-top: 5px;
}

#additive_container div {
  float: left;
  padding: 5px;
  margin-left: 0px;
  margin-right: 7px;
  margin-top: 5px;
}

#additives #add_aditive {
  float: left;
  padding: 5px;
  margin-left: 0px;
  margin-right: 10px;
  background: red;
}

div.additive_harmless {
  background: green;
}

div.additive_questionable {
  background: yellow;
}

div.additive_avoidable {
  background: orange;
}

div.additive_banned {
  background: red;
}


/* Ingredients */
#ingredients_title {
  clear: both;
  margin-top: 5px;
}

#ingredients {
  clear: both;
}

.ingredient {
  font-size: large;
  clear: both;
}

#ingredients_container {
  padding: 3px;
  margin-left: 0px;
  margin-right: 10px;
}

/* Alergens */
#alergens_title {
  clear: both;
  margin-top: 5px;
}

#alergens {
  clear: both;
  padding: 5px;
}

.allergen {
  font-size: large;
}

#alergens_container {
  padding: 3px;
  margin-left: 0px;
  margin-right: 10px;
}

/* Login form */
#login_div input {
  margin: 5px;  
}

/* Signup form */
#signup_div input {
  margin: 5px;  
}


/* Reviews */ /* Irvin */
#RatingsContainer {
  clear: both;
}

.multifield {
  clear: both;
}

.review {
  margin-bottom: 2px;
}

.review_avatar {
  float: left;
  padding: 5px;
  width: 50px;
  height: 50px;
}

.review_content {
  padding: 5px;
}

.review_footer {
  float: left;
  margin-top: 3px;
  font-size: small;
  font-weight: bold;
}

.review_date {
	float: left;
	font-size: small;
	margin-top: 3px;
	margin-left: 10px;
}

.review_spacer {
  clear: both;
}

/* Ratings */
.ratings_score{
	/* float: left; */
	font-size: x-large;
	font-weight: bold;
	margin-bottom: 7px;
	margin-left: 5px;
	text-align: center;
}
.ratings_spacer{
	clear: both;
}

.ratings_bar{
	width: 100%;
	border: 1px solid red;	
	padding: 0px;
	margin: 0px;
}

.ratings_text {
  width: 100%;
  font-size: large;
  text-align: center;
}

.bar_red {
  background: #99CC66;
  float: left;
  height: 20px;
  margin: 0px;  
}

.bar_green {
  background: #ff6666;
  float: left;
  height: 20px;
  margin: 0px;
}

/* Links */
.linkButtons {
	font-size: 11px;
	background-color:#666;
	height: 30px;
	width:90px;
	border: 1px solid #000;
	color:#FFF;
	text-shadow:#000;
}

.linkButtons:hover {
	font-size: 11px;
	background-color:#999;
	height: 30px;
	width:90px;
	text-shadow:#000;
	border:thin;
}

.linkButtons:active {
	font-size: 11px;
	font-weight:bold;
	background-color:#666;
	height: 30px;
	width:90px;
	text-shadow:#000;
	border:thin;
}

.myRow{
	padding-top:5px;	
}

.gradient {


}


/* Iskandar */


.del{
	font-size:15px;
	font-weight:bold;
	background-color:#e6ddd5;
}


#d1 {width:100%; height: 100%;}
#header { height: 20%; margin: 0px; padding: 0px; text-align: left; background:#FFFFFF; color :blue }
#s1 {background: white; border-style:solid; border-bottom-width:4px; border-bottom-color:white;}
#s2 {background: grey; border-style:solid; border-bottom-width:4px; border-bottom-color:white}

